<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .contaienr {
            width: 100px;
            height: 150px;
            /* background-color: blue; */
        }

        .num {
            width: 100px;
            height: 120px;
            background-color: burlywood;
            text-align: center;
            line-height: 120px;
        }

        .sel {
            width: 100px;
            height: 30px;
            /* background-color: cadetblue; */
        }

        button {
            margin: 0;
            padding: 0;
            outline: none;
            width: 30px;
            height: 30px;
            font-size: 10px;
        }

        .active {
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="num">0
        </div>
        <div class="sel">
            <button class="kai">start</button>
            <button class="zan">pause</button>
            <button class="chong">reset</button>
        </div>
    </div>
    <script>
        var sel = document.querySelector(".sel");
        var num = document.querySelector(".num");

        sel.onclick = function (event) {
            var ele = event.target ;
            var cName = ele.className ;
            var parentEl = ele.parentElement ;
            var xuan = parentEl.children;
            console.log(xuan);
            for(var i = 0 ; i < xuan.length ; i ++) {
                xuan[i].className = "";
            }
            ele.className = "active";
            // if(cName.indexOf("kai") > -1) {
            //     if(flag = true) {
            //         num.style["backgroundColor"] = "red";
            //         flag = false;
            //         console.log(flag);
            //     }else {
            //         num.style["backgroundColor"] = "blue";
            //         flag = true; 
            //         console.log(flag)
            //     }
                
                
            // }
            
        }
    </script>
</body>
</html>